<template>
  <div class="son1">
      <!-- 点击这个按钮会报错，因为违反了单向数据流 -->
      <button @click="sonMsg='抠你鸡蛙'">修改sonMsg</button>
      <button @click="send">通知父来改</button>
      <!-- 点击这个按钮不会报错，因为改的是堆没有影响 -->
      <button @click="obj.name='rose'">修改obj里的name</button>
      <!-- 点击这个按钮会报错，因为违反单向数据流 -->
      <button @click="obj = {name:'rose', age: 15}">修改obj</button>
    
      <!-- 不报错，正常修改，父的也会跟着变 -->
      <button @click="list.push(99)">添加元素</button>
      <p>我是son1 --- {{ sonMsg }} -- {{ age }}</p>
      <p>{{ obj }}</p>
      <p>{{ list }}</p>
  </div>
</template>

<script>

export default {
    props: ['sonMsg', 'age', 'obj', 'list'],
    methods: {
        send () {
            this.$emit('changeMsg', '抠你鸡蛙')
        }
    }
}
</script>

<style scoped>
    .son1 {
        width: 340px;
        height: 340px;
        border: 1px solid #000;
    }
    p {
        color: red;
    }
</style>